<template>
  <div v-if="aticleid" class="container bg-white min-vh">
    <div class="row">
      <div class="col">
        <header class="
            text-x
            d-flex
            justify-content-between
            align-items-center
            pb-3
            border-bottom
          ">
          {{ aticleid.name }}
          <span class="time">发布时间： {{ toLocaleDateString(aticleid.createdAt) }} </span>
        </header>
      </div>
    </div>
    <div class="row html">
      <div class="col">
        <div v-html="aticleid.context" class="editor-content-view"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { asyncgetarticle } from "../../../api";
import { toLocaleDateString } from "../../../util/time";

export default {
  name: "Aticle",
  data() {
    return {
      aticleid: null,
    };
  },
  created() {
    this.start();
  },
  props: ["ID"],
  watch: {
    ID() {
      this.start();
    },
  },
  methods: {
    toLocaleDateString,
    async start() {
      try {
        this.aticleid = await asyncgetarticle({ ID: this.ID });
      } catch (e) {
        ElMessage.error(e);
      }
    },
  },
};
</script>

<style scoped>
.text-x {
  font-size: 24px;
  color: #000;
  font-style: normal;
  line-height: 28px;
  margin-top: 24px;
  margin-bottom: 36px;
  font-weight: 600;
}

.container {
  margin-bottom: 20px;
  padding: 35px;
  max-width: 1000px;
}

.html {
  min-height: 50vh;
}

.time {
  font-size: 13px;
  color: rgba(50, 50, 93, 0.352941176470588);
}
</style>